<template>
    <view class="pages">
        <Header special="true" :background="background" :title="title" />
        <NavBar :activeIndex="0"/>
        <CheckScreen
            :screenList="screenList"
            :screenIndex="screenIndex"
            @checkChange="checkChange"
            @sortChange="sortChange"
            @industryChange="industryChange"
            @provinceChange="provinceChange"
            @otherChange="otherChange"
        />
        <view class="main" :style="{'min-height': `${noBarHeight - (footerRail ? 130 : 102)}px`}">
            <view :class="otherShow ? 'other_block' : 'no_other'" id="other_block">
                <view class="other_son" v-for="(item, index) in otherFormList" :key="index">
                    {{ item.name || item.cat_name}}
                    <span @click="onDelete(item)" style="margin-left: 10rpx; font-size: 32rpx">x</span>
                </view>
            </view>
            <scroll-view
                @scrolltolower="lower"
                class="pro_main"
                scroll-y="true"
                :style="{'height': `${noBarHeight - (footerRail ? 130 : 102) - (otherShow ? 70 : 0)}px`}"
                :enhanced="true"
                :show-scrollbar="false"
            >
                <ProBlack
                    @onClick="navDetail"
                    v-for="(item, index) in dataList"
                    :key="index"
                    :dataDetail="item"
                />
            </scroll-view>
        </view>
    </view>
</template>
<script>

import {loginCheck} from "../../utils/utils";

var app = getApp()
import Header from "@/components/Header.vue"
import NavBar from "@/components/NavBar.vue";
import CheckScreen from "@/components/CheckScreen.vue"
import ProBlack from "@/components/ProBlock.vue"
import { mobilesubscription } from "@/utils/api/project";
export default ({
    name: "project",
    data() {
        return {
            background: 'linear-gradient(0, #5162FD, #8E4EF7)',
            title: '项目',
            noBarHeight: app.globalData.noBarHeight,
            footerRail: app.globalData.footerRail,
            screenIndex: 0,
            screenList: [
                {
                    id: 1,
                    title: '智能排序',
                    key: 'matching'
                },
                {
                    id: 2,
                    title: '产业方向',
                    key: 'industry'
                },
                {
                    id: 3,
                    title: '意向区域',
                    key: 'address'
                },
                {
                    id: 4,
                    title: '其他条件',
                    key: 'other'
                }
            ],
            pages: {
                total: 0,
                size: 20,
                page: 1,
                isOver: false
            },
            dataList: [],
            sortValue: {}, // 排序方式
            industryValue: {}, // 产业方式
            provinceValue: {}, // 区域
            otherForm: {
                market: [], // 名称，名称
                tag: [],  // id,id
                nature: [], // id
                scale: [], // id
                crew: [], // id
                registeredcapital: [], // id
                registerdate: [], // id
                abroad: [], // id
            }, // 其他选项数据
        }
    },
    components: {
        NavBar,
        Header,
        CheckScreen,
        ProBlack
    },
    onLoad() {
        this.getList()
    },
    mounted() {
        this.otherForm = uni.getStorageSync('projectSearchForm') ? uni.getStorageSync('projectSearchForm') : {}
        // loginCheck()
    },
    watch: {

    },
    computed: {
        /**
         * 判断其他条件存在内容
         * @returns {*}
         */
        otherShow() {
            let show = false
            try {
                var query = uni.createSelectorQuery()
                let data = query.select('#other_block').boundingClientRect(res => {
                    console.log(res, 'boundingClientRect')
                }).selectViewport().scrollOffset().exec(res => {
                    console.log(res, 'exec')
                })
                Object.keys(this.otherForm).map(res => {
                    if (this.otherForm[`${res}`].length > 0) {
                        throw('error')
                    }
                })
            } catch (e) {
                show = true
            }
            return show
        },
        /**
         * 筛选空数组条件
         * @returns {*}
         */
        otherFormList() {
            let data = {}
            Object.keys(this.otherForm).map(res => {
                if (this.otherForm[res].length > 0) {
                    data[res] = this.otherForm[res]
                }
            })
            return this.treeToArray(data)
        }
    },
    methods: {
        /**
         * 树转数组 mini
         * @param data
         * @returns {*[]}
         */
        treeToArray(data) {
            let ArrayData = []
            Object.keys(data).map(res => {
                data[res].map(child => {
                    ArrayData.push({
                        keyTips: res,
                        ...child
                    })
                })
            })
            return ArrayData
        },
        /**
         * 数组转树 mini
         * @param data // 内容
         * @param key // 判断节点值
         * @param keyName // 父节点名称
         */
        arrayToTree(data) {
            const arr = {}
            data.forEach(res => {
                console.log(res, '111', arr[`${res.keyTips}`])
                if (arr[`${res.keyTips}`]) {
                    arr[`${res.keyTips}`].push(res)
                } else {
                    arr[`${res.keyTips}`] = [res]
                }
            })
            return arr
        },
        onDelete(item) {
            const data = this.otherFormList.filter(res => {
                return res.id != item.id
            })
            var dataList = this.arrayToTree(data)
            this.otherForm = {
                market: [], // 名称，名称
                tag: [],  // id,id
                nature: [], // id
                scale: [], // id
                crew: [], // id
                registeredcapital: [], // id
                registerdate: [], // id
                abroad: [], // id
                ...dataList
            }
            console.log(this.otherForm, '')
            uni.setStorageSync('projectSearchForm', this.otherForm)
        },
        sortChange(e) {
            this.sortValue = e
            this.screenList[0].title = e.label
            this.screenList[0].img = e.img
            this.screenList[0].inImg = e.inImg
            this.resetting()
            this.getList()
        },
        industryChange(e) {
            this.industryValue = e
            this.screenList[1].title = e.cat_name
            this.resetting()
            this.getList()
        },
        provinceChange(e) {
            this.provinceValue = e
            this.screenList[2].title = e.city_name
            this.resetting()
            this.getList()
        },
        otherChange(e) {
            this.otherForm = e
            this.resetting()
            this.getList()
        },
        navDetail(e) {
            uni.navigateTo({
                url: `../../detail/pages/projectDetail/projectDetail?id=${e.id}`
            })
        },
        // 上拉触底分页加载
        lower() {
            if (!this.pages.isOver) {
                this.pages.page++
                this.getList()
            }
        },
        // 获取企业列表
        async getList() {
            const params = {
                uid: uni.getStorageSync('uid'),
                searchtype: 'firm',
                totalrevenue: 1,
                totalprofitrate: 1,
                registerdateorderby: 1,
                registeredcapitalorderby: 1,
                scaleorderby: 1,
                abroadorderby: 1,
                investmentorderby: 1,
                ratioorderby: 1,
                totalassets: 1
            }
            if (this.sortValue?.key && this.sortValue?.value) {
                params[`${this.sortValue.key}`] = this.sortValue.value
            }
            if (this.industryValue?.id) {
                params.hottrade = this.industryValue.id
            }
            if (this.provinceValue.id) {
                params.province = this.provinceValue.id
            }
            // 其他筛选条件数据
            if (this.otherForm.market.length > 0) {
                params.market = this.otherForm.market.map(res => {
                    return res.cat_name
                }).join(',')
            }
            if (this.otherForm.crew.length > 0) {
                params.crew = this.otherForm.crew.map(res => {
                    return res.id
                }).join(',')
            }
            if (this.otherForm.tag.length > 0) {
                params.tag = this.otherForm.tag.map(res => {
                    return res.id
                }).join(',')
            }
            if (this.otherForm.scale.length > 0) {
                params.scale = this.otherForm.scale.map(res => {
                    return res.id
                }).join(',')
            }
            if (this.otherForm.nature.length > 0) {
                params.nature = this.otherForm.nature.map(res => {
                    return res.id
                }).join(',')
            }
            if (this.otherForm.registeredcapital.length > 0) {
                params.registeredcapital = this.otherForm.registeredcapital.map(res => {
                    return res.id
                }).join(',')
            }
            if (this.otherForm.registerdate.length > 0) {
                params.registerdate = this.otherForm.registerdate.map(res => {
                    return res.id
                }).join(',')
            }
            if (this.otherForm.abroad.length > 0) {
                params.abroad = this.otherForm.abroad.map(res => {
                    return res.id
                }).join(',')
            }
            const pages = {
                p: this.pages.page,
                page: this.pages.size
            }
            let data = {}
            data = await mobilesubscription(params, pages)
            this.dataList = this.dataList.concat(data.data.data)
            this.pages.total = data.data.total
            if (data.data.total < (data.data.page * data.data.p)) {
                this.pages.isOver = true
            }
        },
        checkChange(e) {
            this.screenIndex = e
        },

        // 重置分页信息
        resetting() {
            this.pages = {
                total: 0,
                size: 20,
                page: 1,
                isOver: false
            }
            this.dataList = []
        },
    }
})
</script>

<style scoped lang="scss">
.pages {
    width: 100vw;
}
.main {
    flex-direction: column;
    width: 100%;
    background: #f8f8f8;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    .no_other {
        width: 0;
        height: 0;
    }
    .other_block {
        width: 100%;
        height: fit-content;
        background: white;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex-direction: row;
        overflow: hidden;
        padding: 10rpx 0;
        box-sizing: border-box;
        .other_son {
            width: fit-content;
            height: 44rpx;
            border-radius: 32rpx;
            border: 1rpx solid #5162FD;
            font-size: 22rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #5162FD;
            line-height: 44rpx;
            text-align: center;
            padding: 0 20rpx;
            display: flex;
            margin: 5rpx 10rpx;
        }
    }
    .pro_main {
        width: 100%;
        padding: 12rpx 12rpx 0;
        box-sizing: border-box;
    }
}
</style>
